<template>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
        type="primary"
        plain
        size="small"
        style="margin-top: 10px"
        @click="addBanner"
        >新增</el-button
      >
    </el-col>
  </el-row>

  <el-table
    :data="bannerList"
    style="width: 100%; height: 100%; margin-top: 10px"
  >
    <el-table-column label="轮播图片" align="center" prop="image">
      <template v-slot="scope">
        <el-image :src="$apiImg+scope.row.image" style="width: 150px; height: 50px" />
      </template>
    </el-table-column>
    <el-table-column label="状态" align="center" prop="status">
        <template v-slot="scope">
    <el-button type="primary" v-if="scope.row.status=='开启'" size="small" plain>开启</el-button>
    <el-button type="danger" v-else size="small" plain>禁用</el-button>
</template>
</el-table-column>
    <el-table-column label="操作" align="center">
      <template v-slot="scope">
        <el-button size="small" type="primary" @click="editRow(scope.$index)"
          >修改</el-button
        >
        <el-button size="small" type="danger" @click="deleteRow(scope.$index)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 10px"
    v-model:current-page="searchParams.currentPage"
    v-model:page-size="searchParams.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    size="small"
    layout="total, sizes, prev, pager, next, jumper"
    :total="parseInt(totalItems)"
    @size-change="searchList"
    @current-change="searchList"
  />
  <el-dialog v-model="dialogFormEVisible" title="轮播修改" :lock-scroll="false">
    <el-form
      ref="bannerForm"
      :model="formData"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="轮播图" prop="image">
        <el-upload
          drag
          :action="$apiImg+'/api/uploadImage?filetype=banner'"
          :on-success="handleImageSuccess"
          :show-file-list="false"
        >
          <img
            v-if="formData.image"
            :src="$apiImg+formData.image"
            style="width: 300px"
          />
          <el-icon class="el-icon--upload" v-else><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formData.status" class="m-2" placeholder="Select">
          <el-option v-if="formData.status=='开启'" value="禁用"/>
          <el-option v-else-if="formData.status=='禁用'" value="开启"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible" title="轮播添加" :lock-scroll="false">
    <el-form
      ref="productForm"
      :model="formData"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="商品封面" prop="image">
        <el-upload
          drag
          :action="$apiImg+'/api/uploadImage?filetype=banner'"
          :on-success="handleImageSuccess"
          :show-file-list="false"
        >
          <img
            v-if="formData.image"
            :src="$apiImg+formData.image"
            style="width: 300px"
          />
          <el-icon class="el-icon--upload" v-else><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formData.status" class="m-2" placeholder="Select">
            <el-option value="开启"/>
            <el-option value="禁用"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAddSubmit">立即保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  listApi,
  delBannerApi,
  addBannerApi,
  updateBannerApi
} from '@/api/system/sysbanner'
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const data = reactive({
      searchParams: {
        currentPage: 1,
        pageSize: 5,
        productName: ''
      },
      dialogFormEVisible: false,
      dialogFormVisible: false,
      formData: {},
      totalItems: '',
      bannerList: []
    })
    const searchList = () => {
      listApi(data.searchParams).then((res) => {
        if (res) {
          data.bannerList = res.data.data
          data.totalItems = res.data.total
        }
      })
    }
    const addBanner = () => {
      data.dialogFormVisible = true
      data.formData.image = ""
      data.formData.status = ""
    }
    const editRow = (index) => {
      data.dialogFormEVisible = true
      data.formData = data.bannerList[index]
    }
    const onSubmit = () => {
      updateBannerApi(data.formData).then((detail) => {
        if (detail.data) {
          ElMessage({
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
        } else {
          return null
        }
        data.dialogFormEVisible= false
      })
    }
    const onAddSubmit = () => {
      addBannerApi(data.formData).then((detail) => {
        if (detail.data) {
          ElMessage({
            message: '添加成功',
            type: 'success',
            duration: 2000
          })
        } else {
          return null
        }
        data.dialogFormVisible= false
      })
    }
    const deleteRow = (index) => {
      delBannerApi({ bannerId: data.bannerList[index].id }).then((res) => {
        if (res && data.bannerList.splice(index, 1)) {
          ElMessage({
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    }
    searchList()
    return {
      ...toRefs(data),
      searchList,
      editRow,
      onSubmit,
      deleteRow,
      addBanner,
      onAddSubmit
    }
  },
  methods: {
    handleImageSuccess(res) {
      if (res) {
        ElMessage({
          message: '上传成功',
          type: 'success',
          duration: 2000
        })
        this.formData.image = res
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
